<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片压缩工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5rem;
            background: linear-gradient(45deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .upload-area {
            border: 3px dashed #667eea;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 30px;
            background: rgba(102, 126, 234, 0.05);
        }

        .upload-area:hover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.1);
            transform: translateY(-2px);
        }

        .upload-area.dragover {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.2);
            transform: scale(1.02);
        }

        .upload-icon {
            font-size: 3rem;
            color: #667eea;
            margin-bottom: 15px;
        }

        .upload-text {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 10px;
        }

        .file-input {
            display: none;
        }

        .controls {
            display: none;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(102, 126, 234, 0.05);
            border-radius: 15px;
        }

        .control-group {
            margin-bottom: 20px;
        }

        .control-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }

        .quality-slider {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: #ddd;
            outline: none;
            -webkit-appearance: none;
        }

        .quality-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(45deg, #667eea, #764ba2);
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .quality-value {
            display: inline-block;
            margin-left: 10px;
            font-weight: bold;
            color: #667eea;
        }

        .preview-container {
            display: none;
            margin-bottom: 30px;
        }

        .preview-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .preview-item {
            text-align: center;
            padding: 15px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .preview-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .preview-image {
            max-width: 100%;
            height: 200px;
            object-fit: contain;
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .file-info {
            font-size: 0.9rem;
            color: #666;
        }

        .buttons {
            display: none;
            text-align: center;
            gap: 15px;
        }

        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }

        .btn-secondary {
            background: rgba(102, 126, 234, 0.1);
            color: #667eea;
            border: 2px solid #667eea;
        }

        .btn-secondary:hover {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .compression-info {
            text-align: center;
            margin-top: 15px;
            padding: 15px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
            color: #333;
        }

        @media (max-width: 768px) {
            .preview-grid {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🖼️ 图片压缩工具</h1>
        
        <div class="upload-area" id="uploadArea">
            <div class="upload-icon">📁</div>
            <div class="upload-text">点击选择图片或拖拽图片到此处</div>
            <div style="color: #999; font-size: 0.9rem;">支持 JPG、PNG、WebP 格式</div>
            <input type="file" class="file-input" id="fileInput" accept="image/*">
        </div>

        <div class="controls" id="controls">
            <div class="control-group">
                <label class="control-label">压缩质量</label>
                <input type="range" class="quality-slider" id="qualitySlider" min="0.1" max="1" step="0.1" value="0.8">
                <span class="quality-value" id="qualityValue">80%</span>
            </div>
        </div>

        <div class="preview-container" id="previewContainer">
            <div class="preview-grid">
                <div class="preview-item">
                    <div class="preview-title">原图</div>
                    <img class="preview-image" id="originalImage" alt="原图">
                    <div class="file-info" id="originalInfo"></div>
                </div>
                <div class="preview-item">
                    <div class="preview-title">压缩后</div>
                    <img class="preview-image" id="compressedImage" alt="压缩后">
                    <div class="file-info" id="compressedInfo"></div>
                </div>
            </div>
        </div>

        <div class="buttons" id="buttons">
            <button class="btn btn-primary" id="downloadBtn">📥 下载压缩图片</button>
            <button class="btn btn-secondary" id="resetBtn">🔄 重新选择</button>
        </div>

        <div class="compression-info" id="compressionInfo" style="display: none;"></div>
    </div>

    <script>
        class ImageCompressor {
            constructor() {
                this.originalFile = null;
                this.compressedBlob = null;
                this.initElements();
                this.bindEvents();
            }

            initElements() {
                this.uploadArea = document.getElementById('uploadArea');
                this.fileInput = document.getElementById('fileInput');
                this.controls = document.getElementById('controls');
                this.qualitySlider = document.getElementById('qualitySlider');
                this.qualityValue = document.getElementById('qualityValue');
                this.previewContainer = document.getElementById('previewContainer');
                this.originalImage = document.getElementById('originalImage');
                this.compressedImage = document.getElementById('compressedImage');
                this.originalInfo = document.getElementById('originalInfo');
                this.compressedInfo = document.getElementById('compressedInfo');
                this.buttons = document.getElementById('buttons');
                this.downloadBtn = document.getElementById('downloadBtn');
                this.resetBtn = document.getElementById('resetBtn');
                this.compressionInfo = document.getElementById('compressionInfo');
            }

            bindEvents() {
                // 文件选择
                this.uploadArea.addEventListener('click', () => this.fileInput.click());
                this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e.target.files[0]));

                // 拖拽上传
                this.uploadArea.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    this.uploadArea.classList.add('dragover');
                });

                this.uploadArea.addEventListener('dragleave', () => {
                    this.uploadArea.classList.remove('dragover');
                });

                this.uploadArea.addEventListener('drop', (e) => {
                    e.preventDefault();
                    this.uploadArea.classList.remove('dragover');
                    const file = e.dataTransfer.files[0];
                    if (file && file.type.startsWith('image/')) {
                        this.handleFileSelect(file);
                    }
                });

                // 质量滑块
                this.qualitySlider.addEventListener('input', () => {
                    const quality = this.qualitySlider.value;
                    this.qualityValue.textContent = Math.round(quality * 100) + '%';
                    if (this.originalFile) {
                        this.compressImage();
                    }
                });

                // 按钮事件
                this.downloadBtn.addEventListener('click', () => this.downloadImage());
                this.resetBtn.addEventListener('click', () => this.reset());
            }

            handleFileSelect(file) {
                if (!file || !file.type.startsWith('image/')) {
                    alert('请选择有效的图片文件');
                    return;
                }

                this.originalFile = file;
                this.showOriginalImage();
                this.compressImage();
                this.showControls();
            }

            showOriginalImage() {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.originalImage.src = e.target.result;
                    this.originalInfo.textContent = `大小: ${this.formatFileSize(this.originalFile.size)}`;
                };
                reader.readAsDataURL(this.originalFile);
            }

            compressImage() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image();

                img.onload = () => {
                    // 设置canvas尺寸
                    canvas.width = img.width;
                    canvas.height = img.height;

                    // 绘制图片
                    ctx.drawImage(img, 0, 0);

                    // 压缩图片
                    const quality = parseFloat(this.qualitySlider.value);
                    canvas.toBlob((blob) => {
                        this.compressedBlob = blob;
                        this.showCompressedImage(blob);
                        this.showCompressionInfo();
                    }, 'image/jpeg', quality);
                };

                img.src = URL.createObjectURL(this.originalFile);
            }

            showCompressedImage(blob) {
                const url = URL.createObjectURL(blob);
                this.compressedImage.src = url;
                this.compressedInfo.textContent = `大小: ${this.formatFileSize(blob.size)}`;
            }

            showControls() {
                this.controls.style.display = 'block';
                this.previewContainer.style.display = 'block';
                this.buttons.style.display = 'flex';
            }

            showCompressionInfo() {
                const originalSize = this.originalFile.size;
                const compressedSize = this.compressedBlob.size;
                const reduction = ((originalSize - compressedSize) / originalSize * 100).toFixed(1);
                const ratio = (compressedSize / originalSize * 100).toFixed(1);

                this.compressionInfo.innerHTML = `
                    <strong>压缩效果:</strong> 
                    减小了 ${reduction}% 
                    (${this.formatFileSize(originalSize)} → ${this.formatFileSize(compressedSize)})
                    <br>
                    压缩比: ${ratio}%
                `;
                this.compressionInfo.style.display = 'block';
            }

            downloadImage() {
                if (!this.compressedBlob) return;

                const url = URL.createObjectURL(this.compressedBlob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `compressed_${this.originalFile.name.replace(/\.[^/.]+$/, '')}.jpg`;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }

            formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                const k = 1024;
                const sizes = ['Bytes', 'KB', 'MB', 'GB'];
                const i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            reset() {
                this.originalFile = null;
                this.compressedBlob = null;
                this.fileInput.value = '';
                this.controls.style.display = 'none';
                this.previewContainer.style.display = 'none';
                this.buttons.style.display = 'none';
                this.compressionInfo.style.display = 'none';
                this.qualitySlider.value = 0.8;
                this.qualityValue.textContent = '80%';
            }
        }

        // 初始化压缩器
        const compressor = new ImageCompressor();
    </script>
</body>
</html>